<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-carousel">
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-model="commonAttr.paginationType" :valLists="PAGINATION_TYPE" label="分页器类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      <dropdown-normal v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.dot || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns" label="分页器颜色" :valLists="CAROUSEL_COLOR_TYPES" v-model="commonAttr.paginationColorType" @change="onChangeAttr"></dropdown-normal>
      <div v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.btns || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns">
        <p class="margin-left-right-16">翻页左按钮</p>
        <add-img-con :url="commonAttr.preBtnUrl" comAttr="commonAttr" picAttr="preBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
        <p class="margin-left-right-16">翻页右按钮</p>
        <add-img-con :url="commonAttr.nextBtnUrl" comAttr="commonAttr" picAttr="nextBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>   
        <input-normal label="翻页按钮宽度" v-model="commonAttr.swiperBtnWidth" @change="onChangeAttr"></input-normal>
        <input-normal label="翻页按钮高度" v-model="commonAttr.swiperBtnHeight" @change="onChangeAttr"></input-normal>
      </div>
      <dropdown-normal v-model="commonAttr.carouselType" :valLists="CAROUSEL_TYPES" label="轮播类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      <div v-if="commonAttr.carouselType == CAROUSEL_TYPES_MAP.slidesPerView">
        <input-normal label="显示滑块数" v-model="commonAttr.slideNum" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.slideSpace" label="滑块间距" :max="100" :step="2" @change="onChangeAttr"></slider-normal>
      </div>
      <input-normal label="初始化索引" v-model="commonAttr.initialSlide" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.isLoop" label="循环播放" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.autoTurnPage" label="自动翻页" @change="onChangeAttr"></switch-normal>
      <slider-normal v-if="commonAttr.autoTurnPage" v-model="commonAttr.turnPageTime" :min="0" :max="10" :step="1" label="翻页时间" @change="onChangeAttr"></slider-normal>
      
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.letterSpacing" label="字距" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
      <input-normal label="文字粗细" v-model="commonAttr.fontWeight" @change="onChangeAttr"></input-normal>
      <slider-normal v-model="commonAttr.paddingTB" label="上下内距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.paddingLR" label="左右内距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.borderSize" label="边框大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.borderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
      <input-normal label="背景图片" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
      
      <el-divider content-position="center">列表项设置</el-divider>
      <slider-normal v-model="commonAttr.itemMarginTB" label="上下边距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.itemMarginLR" label="左右边距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.itemPaddingTB" label="上下内距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.itemPaddingLR" label="左右内距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.itemBorderSize" label="边框大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.itemBorderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.itemBGColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <p class="margin-left-right-16">背景图片</p>
      <add-img-con :url="commonAttr.itemBgUrl" comAttr="commonAttr" picAttr="itemBgUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
      <input-normal label="背景图片" v-model="commonAttr.itemBgUrl" @change="onChangeAttr"></input-normal>
      <input-normal label="图片宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
      <input-normal label="图片高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      <textarea-normal v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.question" label="题背景图片组" placeholder="不同图片用逗号分隔" v-model="commonAttr.itemBgUrls" @change="onChangeAttr"></textarea-normal>
      <textarea-normal v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.question" label="选中题背景图片组" placeholder="不同图片用逗号分隔" v-model="commonAttr.itemSelectedBgUrls" @change="onChangeAttr"></textarea-normal>

      <switch-normal v-model="commonAttr.isBtn" label="有按钮样式编辑" @change="onChangeAttr"></switch-normal>
      <submit-button v-if="commonAttr.isBtn" :btnComponentData="componentData.btn" comAttr="btn"></submit-button>
      <input-normal v-if="commonAttr.isBtn" label="按钮距底(负)" v-model="commonAttr.bottomDistance" @change="onChangeAttr"></input-normal>
      
      <div v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.jewelleryVideo">
        <el-divider content-position="center">播放按钮样式</el-divider>
        <add-video-btn-con ></add-video-btn-con>
        <dropdown-normal label="文本显示行数" :valLists="LINE_NUM" v-model="commonAttr.lineNum" @change="onChangeAttr"></dropdown-normal>
      </div>

      <el-divider content-position="center">内容设置</el-divider>
      <div v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.swiperSelect">
        <input-normal label="关联组件ID" v-model="commonAttr.relateCompId" @change="onChangeAttr"></input-normal>
        <input-normal label="选中背景图片" v-model="commonAttr.bgSelectUrl" @change="onChangeAttr"></input-normal>
      </div>
      <div v-if="isDislayCommonList">
        <div v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.question">
          <p class="margin-top-10 margin-left-right-16">答题底部图片</p>
          <add-img-con :url="commonAttr.numberUrl" comAttr="commonAttr" picAttr="numberUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="规则题" placeholder="题的索引用,隔开如:1,2" v-model="commonAttr.questionIndexStr" @change="onChangeAttr"></input-normal>
          <textarea-normal label="选题与发博规则" placeholder="[[1,2,3,4], [5,6,7,8]]" v-model="commonAttr.questionPushRule" @change="onChangeAttr"></textarea-normal>
        </div>
        <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.different">
          <textarea-normal label="相同图片" placeholder="不同图片用逗号分隔" v-model="commonAttr.sames" @change="onChangeAttr"></textarea-normal>
          <textarea-normal label="不同图片" placeholder="不同图片用逗号分隔" v-model="commonAttr.differents" @change="onChangeAttr"></textarea-normal>
          <textarea-normal label="自定义常量" placeholder="{oriX:112,oriY:152}" v-model="commonAttr.customParams" @change="onChangeAttr"></textarea-normal>
        </div>
        
        <el-button type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
              <template #title>
              轮播组{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
            </template>
            <div v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.question" class="margin-top-10">
              <input-normal label="答题标题" v-model="item.title" @change="onUpdateItem(index)"></input-normal>
              <el-button type="primary"  @click.stop="onAddQuestionItem(index)" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加题</el-button>
              <el-collapse v-model="activeNames_" class="margin-left-right-16">
                <el-collapse-item v-for="(question, qIndex) in item.questions"  :name="qIndex+1" :key="qIndex">
                    <template #title>
                    题{{qIndex+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteQuestionItem($event, index)"></i>
                  </template>
                    <!-- <add-img-con :url="question.url" comAttr="questions" picAttr="url" :index="index" :qIndex="qIndex" :isCrop='false' :width="220" :height="100" class="margin-left-right-16"></add-img-con> -->
                    <input-normal label="题标题" placeholder="" v-model="question.text" @change="onUpdateQuestionItem(index)"></input-normal>
                    <input-normal label="题类型" placeholder="规则字段" v-model="question.type" @change="onUpdateQuestionItem(index)"></input-normal>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.different">
              <input-normal label="行数" v-model="item.row" @change="onUpdateItem(index)"></input-normal>
              <input-normal label="列数" v-model="item.col" @change="onUpdateItem(index)"></input-normal>
            </div>
            <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.reward">
              <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="名称" v-model="item.name" @change="onUpdateItem(index)"></input-normal>
              <input-normal label="职位" v-model="item.profession" @change="onUpdateItem(index)"></input-normal>
              <textarea-normal label="简介" v-model="item.text" @change="onUpdateItem(index)"></textarea-normal>
            </div>
            <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.jewelleryVideo">
              <add-img-con :url="item.itemUrl" comAttr="item" picAttr="itemUrl" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="名称" v-model="item.name" @change="onUpdateItem(index)"></input-normal>
              <textarea-normal label="简介" v-model="item.text" @change="onUpdateItem(index)"></textarea-normal>
              <input-normal label="视频url" v-model="item.url" @change="onChangeAttr"></input-normal>
              <add-video-con :item="item" :index="index" :compItem="componentData" comAttr="commonAttr"></add-video-con>
              <p class="margin-left-right-16">背景</p>
              <add-img-con :url="item.bgUrl" comAttr="item" picAttr="bgUrl" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal v-if="index == 0" label="自定义参数" v-model="commonAttr.itemParams" @change="onChangeAttr"></input-normal>
            </div>
            <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.swiperSelect">
              <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="图片" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
              <add-img-con :url="item.selectUrl" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="选中图片" v-model="item.selectUrl" @change="onUpdateItem(index)"></input-normal>
              <input-normal label="宽,高" v-model="item.urlStyle" @change="onUpdateItem(index)"></input-normal>
              <add-img-con :url="item.btnImg" picAttr="btnImg" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="按钮宽,高,left,top" v-model="item.btnStyle" @change="onUpdateItem(index)"></input-normal>
              <input-normal label="跳转链接" v-model="item.btnUrl" @change="onUpdateItem(index)"></input-normal>
            </div>
            <div v-else class="margin-top-10">
              <textarea-normal label="" placeholder="请在此处输入标题" v-model="item.title" @change="onUpdateItem(index)"></textarea-normal>
              <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <textarea-normal label="显示内容" placeholder="请在此处输入内容" v-model="item.text" @change="onUpdateItem(index)"></textarea-normal>
              <input-normal label="跳转链接" v-model="item.link" @change="onUpdateItem(index)"></input-normal>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-form>
  </right-template>
</template>
<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import SubmitButton from '@/views/components/submit-button.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import AddVideoCon from '@/views/components/add-video-con.vue'
  import AddVideoBtnCon from "@/views/components/add-video-btn-con.vue";

  import { mapState, mapActions } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'
  import { PAGINATION_TYPE, PAGINATION_TYPE_MAP, DEFAULT_MEDIAS, LINE_NUM } from '@/common/const'
  import { COMMON_ITEM_TYPE_MAP, CAROUSEL_TYPES, CAROUSEL_TYPES_MAP, 
  CAROUSEL_COLOR_TYPES } from '@/const/'
  import { ComponentTypes } from '@/store/default-styles'
  import {  } from '@/const/'
  

  export default {
    mixins: [editUtils],
    setup () {
      return {
        LINE_NUM: LINE_NUM,
        COMMON_ITEM_TYPE_MAP: COMMON_ITEM_TYPE_MAP,
        PAGINATION_TYPE: PAGINATION_TYPE,
        PAGINATION_TYPE_MAP: PAGINATION_TYPE_MAP,
        CAROUSEL_TYPES: CAROUSEL_TYPES,
        CAROUSEL_TYPES_MAP: CAROUSEL_TYPES_MAP,
        CAROUSEL_COLOR_TYPES: CAROUSEL_COLOR_TYPES,
        activeNames_: [1],
        question: {
          title: '你在吃拉面的时候搭配什么最销魂？',
          questions: [
            {
              questionUrl:'https://static.hd.xxx.com/jye/fe-web/images/default-img.png',
              type: '',
              text: '',
            }
          ],
        },
        different: {
          row: 0,
          col: 0,
          sames: [
            {
              picUrl: ''
            }
          ],
          differents: [
            {
              picUrl: ''
            }
          ]
        },
        common: {
          title: "",
          url: DEFAULT_MEDIAS.img,
          text: '',
          link: '',
        },
        reward: {
          name: "",
          profession: "",
          url: DEFAULT_MEDIAS.img,
          text: '',
        },
        jewelleryVideo: {
          itemUrl: DEFAULT_MEDIAS.img,
          url:"",
          poster:"",
          bgUrl: "",
          name: "",
          text: '',
        },
        swiperSelect:{
          url:"",
          btnImg:"",
          btnUrl: "",
          selectUrl: "",
          btnStyle: "",
          urlStyle: ""
        }
      }
    },
    components: {
      RightTemplate,
      AddImgCon,
      InputNormal,
      SwitchNormal,
      SubmitButton,
      ColorNormal,
      SliderNormal,
      DropdownNormal,
      TextareaNormal,
      AddVideoCon,
      AddVideoBtnCon,
    },
    computed:{
      ...mapState({
      }),
    },
    methods:{
      ...mapActions({
      }),
      onChangeItemType(){
        this.onChangeAttr()
      },
      onAddItem(){
        let itemType = this.commonAttr.itemType;
        let item// = _.cloneDeep(ComponentTypes[this.componentData.cid].lists[0]);
        if(itemType == COMMON_ITEM_TYPE_MAP.question){
          item = _.cloneDeep(this.question);
        }else if(itemType == COMMON_ITEM_TYPE_MAP.different){
          item = _.cloneDeep(this.different);
        }else if(itemType == COMMON_ITEM_TYPE_MAP.reward){
          item = _.cloneDeep(this.reward);
        }else if(itemType == COMMON_ITEM_TYPE_MAP.jewelleryVideo){
          item = _.cloneDeep(this.jewelleryVideo);
        }else if(itemType == COMMON_ITEM_TYPE_MAP.swiperSelect){
          item = _.cloneDeep(this.swiperSelect);
        }else{
          item = _.cloneDeep(this.common);
        }
        if(item){
          this.addComponentItem(item);
        }
      },
      onUpdateItem(index){
        let item = this.lists[index];
        this.updateComponentItem({index, item});
      },
      onAddQuestionItem(index){
        let questionItem;
        if(ComponentTypes[this.componentData.cid].lists[0] && ComponentTypes[this.componentData.cid].lists[0].questions){
          questionItem = _.cloneDeep(ComponentTypes[this.componentData.cid].lists[0].questions[0]);
        }else{
          questionItem = this.question.questions[0]
        }
        let item = this.lists[index]
        if(item){
          item.questions.push(questionItem);
          this.updateComponentItem({index, item});
        }
      },
      onUpdateQuestionItem(index){
        let item = this.lists[index];
        this.updateComponentItem({index, item});
      },
      onDeleteQuestionItem(e, index, qIndex){
        e.stopPropagation();
        e.preventDefault();

        let item = this.lists[index];
        item.questions.splice(qIndex, 1);
        this.updateComponentItem({index, item});
      },
    }
  }
</script>